/*
 * @Description: 
 * @version: 1.0
 * @Author: ziwei
 * @Date: 2021-08-04 20:29:05
 * @LastEditors: ziwei
 * @LastEditTime: 2021-08-15 09:14:26
 */

import {createDOM,findDom} from './react-dom'
//在事件函数执行之前inBatchingUpdate为
export let updateQueue ={
    inBatchingUpdate = false,//默认是非同步的 false  true:批量的
    updaters:[],//更新器的数组
    batchUpdate(){
        for(let updater of updateQueue.updaters){
            updater.updateCompnent()
        }
    }
}
//更新器
class Updater{
    //构造函数
    constructor(classInstance){
        this.classInstance = classInstance;
        this.pendingStates = [];//等待更新的数组 调用setState
        //this.callbacks=[];
    }
    addState(partialState){
        //每当更新都会调用
        this.pendingStates.push(partialState);
        this.emitUpdate();//触发更新
    }
    emitUpdate(){
        this.updateCompnent();
        /* const {classInstance} = this;
        //有可能是批量异步更新也有可能那个是同步更新
        if(updateQueue.inBatchingUpdate){
            updateQueue.updaters.push(this);//不刷 新组件视图
        }else{
            //同步直接更新
        } */
    }
    updateCompnent(){
        const {classInstance,pendingStates} = this;
        if(pendingStates.length>0){
            shouldUpdate(classInstance,this.getState())
        }
    }
    getState(){
        const {classInstance,pendingStates} = this;
        let {state} = classInstance;//老状态
        pendingStates.forEach((partialState)=>{//和每个分状态
            state = {...state,...partialState}
        })
        pendingStates.length = 0;//清空等待生效的状态的数组
        return state;
    }
}


function shouldUpdate(classInstance,nextProps,nextState) {
    let willUpdate = true;//表示组件是否要更新
    if(classInstsance.shouldComponentUpdate){

    }
    //如果要更新，并且有componentWillUpdate方法
    if(willUpdate&&classInstance.componet){

    }
}

class Component{
  //区分标志类组件 子类继承父类静态属性也可以被继承
  static isReactComponent=true
  constructor(props){
    this.props = props,
    this.state = {},
    this.updater = new Updater(this)
  }

  //参数是新的状态对象，这个新状态对象会合并到老状态对象上
  //老状态没有添加  老状态有的属性会被覆盖
  //state状态 的更新是批量的 是异步执行的，事件函数处理完才会取该状态
 //多次setState,会进行一个合并
  setState(partialState){
      this.updater.addState(partialState);
  }

  forceUpdate(){
      let oldRenderVdom = this.oldRenderVdom;//上一次类组件render放大计算得到的虚拟DOM
      //let oldDOM = oldRenderVdom.dom;
      let oldDOM = findDom(oldRenderVdom);//获取oldRenderVdom对应真实DOM
      if(this.constructor.getDerivedStateFromProps){
          newState = this.constructor.getDerivedStateFromProps(this.props,this.state);
          if(newState){
              this.state = newState;
          }
      }
      let snapshot = this.getSnapshotBeforeUpdate&&this.getSnapshotBeforeUpdate();
      //然后基于新的属性和状态,计算新的虚拟DOM
      let newRenderVdom = this.render();
      //根据新的虚拟DOM得到真实的DOM
      let newDOM = createDOM(newRenderVdom);
      //把老的真实DOM替换成新的真实DOM
      oldDOM.parentNode.replaceChild(newDOM,oldDOM);
      this.oldRenderVdom = newRenderVdom;
      if(this.componentDidUpdate){

      }
  }
}
//源码写法 Component.prototype.isReactComponent{}

export default Component;